<template>
  <div class="shopinfo">
     <!-- 顶部显示店铺名称头像 -->
     <div class="shoptop">
       <img :src="shop.logo">
       <span>{{shop.name}}</span>
     </div>
     <!-- 中间显示销量和评分 -->
     <div class="shopmiddle">
       <div class="shopmiddle-left shopmiddle-item">
        <div class="sell">
          <div class="num">{{shop.sells}}</div>
          <div class="text">总销量</div>
        </div>
        <div class="goodsnum">
          <div class="num">{{shop.goodsCount}}</div>
          <div class="text">全部宝贝</div>
        </div>
       </div>
       <div class="shopmiddle-right shopmiddle-item">
         <table>
           <tr v-for="(item,index) in shop.score" :key="index">
             <td>{{item.name}}</td>
             <td class="score" :class="{'betterscore': item.isBetter}">{{item.score}}</td>
             <td class="better" :class="{'isbetter': item.isBetter}"><span>{{item.isBetter? '高':'低'}}</span></td>
           </tr>
         </table>
       </div>
     </div>
     <div class="shopbottom"></div>
  </div>
</template>

<script>
export default {
  name: 'detailshopinfo',
  props: {
    shop: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.shopinfo
  padding 25px 8px
  border-bottom: 5px solid #f2f5f8;
  .shoptop
    line-height 45px
    display: flex
    align-items: center
    img
      width 45px
      height 45px
      border-radius 50%
      overflow hidden
      margin-right 10px
    span
      font-size 16px
      color #666
  .shopmiddle
    display flex
    align-items: center
    margin-top 15px
    .shopmiddle-item
      flex 1
    .shopmiddle-left
      display: flex
      justify-content: space-evenly
      text-align: center
      border-right: 1px solid rgba(0,0,0,.1)
      color #333
      .num
        font-size 18px
      .text
        margin-top 10px
        font-size 12px
    .shopmiddle-right
      font-size 13px
      table
        margin 0 0 0 20px
        width 130px
        line-height 24px
        color #333
        td
          padding 5px 0
        .score
          color: #5ea732
        .betterscore
          color: #f13e3a
        .better
          span
            background-color: #5ea732
            color: #fff
            text-align: center
            padding 3px
        .isbetter
          span
            background-color: #f13e3a
            padding 3px
</style>